<script setup>
import NavigationBarStricky from "@/views/Common/NavigationBarSticky.vue";
import PageHeader from "@/views/Common/PageHeader.vue";
import NavigationBar from "@/views/Common/NavigationBar.vue";
import PageFooter from "@/views/Common/PageFooter.vue";
import { useRoute } from 'vue-router';

const route = useRoute();
</script>

<template>
  <div class="finance-application-page">
    <NavigationBarStricky />
    <PageHeader />
    <NavigationBar />

    <div class="page-container">
      <div class="content">
        <div class="nav-menu">
          <el-menu :default-active="route.path" class="fa-menu" router>

            <el-menu-item index="/finance/project">
              <span>项目管理</span>
            </el-menu-item>

            <el-menu-item index="/finance/form">
              <span>我的融资申请表</span>
            </el-menu-item>
          </el-menu>
        </div>

        <div class="router-view-wrapper">
          <router-view></router-view>
        </div>
      </div>
    </div>

    <PageFooter />
  </div>
</template>

<style scoped lang="less">
.finance-application-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f3f6f8;
}

.page-container {
  flex: 1;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.content {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: flex-start;
}

.nav-menu {
  width: 220px;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  flex-shrink: 0; // 防止导航菜单被压缩

  .fa-menu {
    border-right: none; // 移除 el-menu 默认的右边框
    background-color: transparent;

    .el-menu-item {
      margin: 5px 0;
      height: 45px;
      border-radius: 6px;
      &:hover {
        background-color: #f7f7f7;
      }
      &.is-active {
        background-color: #e6f3ff;
        color: #007bff;
        font-weight: bold;
      }
    }

    .el-sub-menu__title {
      &:hover {
        background-color: #f7f7f7;
      }
    }
  }
}

.router-view-wrapper {
  flex: 1; // 占据剩余空间
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.06);
  min-height: 600px; // 保证内容区有个最小高度
}
</style>